<template>
  <div class="extension-applySuccess">

    <div class="preview">
      <div class="top">
        <p class="day">{{ extensionDay }}</p>
        <p>{{ $t('extensionDays') }}</p>
      </div>
      <date-range
          :date-data="dateData"
          :overdue-flag="overdueFlag">
      </date-range>
      <div class="tips">Extension start date is based on payment arrival time</div>
    </div>

    <div class="extension">
      <div class="sort">
        <span>{{ $t('extensionFee') }}</span>
        <span class="amount">PHP {{ extensionFee | formatCurrency(',') }}</span>
      </div>
      <div class="sort">
        <span>{{ $t('contractNumber') }}</span>
        <span class="number">{{ extensionPayNumber }}</span>
      </div>
    </div>

    <div class="help">
      <p class="title">Pay For Extension Steps</p>
      <p>1.Go to ECPAy accredited store(e.g 7.11) or M.Lhuiller.</p>
      <p>2.Choose Bills payment 'Skypay' or input company name 'Skypay'.</p>
      <p>3.Provide contract number and other needed information.</p>
      <p>4.Pay and get confirmation number and Receipt.</p>
      <p>5.To know more detail, click <span @click="goHelp" class="link">'How to Pay'</span>.</p>
    </div>

  </div>
</template>

<script>
import DateRange from './components/dateRange';

export default {
  name: 'extension-applySuccess',
  components: {
    DateRange,
  },
  data() {
    return {
      extensionDay: '',
      extensionFee: '',
      dateData: {
        fromDate: '',
        toDate: '',
      },
      extensionPayNumber: '',
      overdueFlag: '',
    };
  },
  methods: {
    /**
     * 跳转还款帮助页
     */
    goHelp() {
      this.$router.push({
        path: '/help',
      });
    },
  },
  created() {
    const query = this.$route.query;
    this.extensionDay = query.extensionDay;
    this.extensionFee = query.extensionFee;
    this.dateData.fromDate = query.fromDate;
    this.dateData.toDate = query.toDate;
    this.extensionPayNumber = query.extensionPayNumber;
    this.overdueFlag = query.overdueFlag;
  },
};
</script>

<style lang="scss">
@import "~@/assets/scss/function";

  [data-page=extension-applySuccess] {
    .extension-applySuccess {
      padding: 30px 0;
      .preview {
        width:690px;
        background:#FFF;
        border-radius:20px;
        margin:0 auto;
        padding: 40px 30px 30px 30px;
        .top {
          text-align: center;
          font-size:24px;
          color:#999999;
          .day {
            font-size:56px;
            font-weight:bold;
            color:$mainColor;
            line-height:66px;
            margin-bottom:8px;
          }
        }
        .tips {
          font-size:24px;
          color: $btnBg;
          line-height:28px;
          background: url('~@/assets/imgs/tips.png') no-repeat left top;
          background-size: 32px 32px;
          padding:2px 0 0 40px;
          margin: 30px 0 0 0;
        }
      }
      .extension {
        width:690px;
        background:#FFF;
        border-radius:20px;
        margin:30px auto 0 auto;
        padding: 20px 30px;
        font-size:28px;
        color:#333333;
        .sort {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height:104px;
          border-bottom:1px solid #EEEEEE;
          .amount {
            color:$mainColor;
            font-size: 36px;
            font-weight: bold;
          }
          .number {
            font-size:32px;
            font-weight:bold;
            color:#333333;
          }
        }
        .sort:last-child {
          border:none;
        }
      }
      .help {
        width:690px;
        margin:30px auto 0 auto;
        background:#FFF;
        border-radius:20px;
        padding: 30px 30px 40px 30px;
        color:#666;
        font-size:28px;
        line-height:32px;
        p {
          margin:0 0 30px 0;
        }
        p:last-child {
          margin:0px;
        }
        .title {
          font-size:36px;
          font-weight:bold;
          color:#222222;
          line-height:42px;
          margin:0 0 40px 0;
        }
        .link {
          color: $btnBg;
          text-decoration: underline;
        }
      }
    }
  }
</style>
